<template>
  <div class="container">
    <div class="header" :style="headerBg">
      <!--  -->
      <!-- <p class="header_name"></p> -->
      <div class="headfun">
          <div class="header_name">
                {{userinfo.orgName}}
          </div>
          <div>
            <img
        src="./../assets/images/homepage/set.png"
        alt
        class="set"
        @click="$router.push({path:'/Workbench'})"
      />
          </div>
      </div>

      <div class="mingpian" :style="mingpianbg">
        <img
          class="headerimg"
          :src="userinfo.photo+'?width=100&height=100'"
          alt
          style="    background: #fff;"
        />
        <div class="mingpian_more" @click="goMore()">了解更多</div>

        <div class="mingpian_msg">
          <div>
            <span class="user_name">{{userinfo.name}}</span> &nbsp;&nbsp;&nbsp;
            <span class="user_job">{{userinfo.position}}</span>
          </div>
          <div class="mingpian_targer">
            <span class="item_targer">金牌经理</span>
            <span class="item_targer">金牌保险规划师</span>
          </div>
          <div class="soket">
              <div class="soket">
            <div class="soket_button" @click="noOpen('微信名片')">微信</div>
            <!-- <a :href="'tel:' + userinfo.phone">
              <div class="soket_button">电话</div>
            </a> -->
  <div class="soket_button"   @click="noOpen('电话号码')">电话</div>

            
          </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <!-- <img src="./../assets/images/homepage/jiayou.png" alt="" style="width:100%"> -->
    </div>
    <div v-for="(item,index) in list" :key="'item'+index">
      <component :is="item.workBenchName" :data="item.dataList" v-if="item.delFlag == 0"></component>
    </div>
    <Loading v-if="loadingShow"></Loading>
    <ManagerFoot></ManagerFoot>
  </div>
</template>
<script>
import wx from 'weixin-js-sdk'
import ManagerFoot from "./../components/ManagerFoot";
import Loading from "./../components/Loading";
import NewHead from "./../components/NewHead"; //新闻头条
import ManagerLinks from "./../components/ManagerLinks"; //推荐链接
import ManagerGoodPro from "./../components/ManagerGoodPro"; //精选产品
import ManagerExperience from "./../components/ManagerExperience"; //邀您体验
import MangerHotAct from "./../components/MangerHotAct"; //邀您体验


import Api from "./../api/api";
import { Toast } from "vant";
export default {
  components: {
    NewHead,
    Loading,
    ManagerFoot,
    ManagerLinks,
    ManagerGoodPro,
    ManagerExperience,
    MangerHotAct,

  },
  data() {
    return {
      loadingShow: true,
      list: [],
      headerBg: {
        backgroundImage:
          "url(" + require("./../assets/images/homepage/headerbg.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      },
      mingpianbg: {
        backgroundImage:
          "url(" + require("./../assets/images/homepage/mingpianbg.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      },
      scroll: 0,
      userinfo: {}
    };
  },
  methods: {
    goMore() {
      this.$router.push({
        path: "/ManagerInfo",
        query: {
          info: this.userinfo
        }
      });
    },
    getAll() {
      this.$axios
        .get(
          `${Api.HTTP.all}?employeeCode=${localStorage.getItem("employeeCode")}`
        )
        .then(res => {
          console.log(res.data.benchList);
          let list = res.data.benchList;
          list.forEach(el => {
            if (el.workBenchName == "头条新闻") {
              el.workBenchName = "NewHead";
            }
            if (el.workBenchName == "热门活动") {
              el.workBenchName = "MangerHotAct";
            }
            if (el.workBenchName == "精选产品") {
              el.workBenchName = "ManagerGoodPro";
            }
            if (el.workBenchName == "邀您体验") {
              el.workBenchName = "ManagerExperience";
            }
            if (el.workBenchName == "推荐链接") {
              el.workBenchName = "ManagerLinks";
            }
          });
          this.list = list;
          let obj = {
            honorDesc: res.data.honorDesc,
            motto: res.data.motto,
            name: res.data.name,
            phone: res.data.phone,
            photo: res.data.photo,
            position: res.data.position,
            resume: res.data.resume,
            orgName: res.data.orgName,
            code: res.data.code
          };
          sessionStorage.setItem('name',res.data.name);
          sessionStorage.setItem('photo',res.data.photo);
          this.userinfo = obj;
          this.loadingShow = false;
        })
        .catch(error => {
          Toast("网络错误");
          this.loadingShow = false;
        });
    },
    requestShare() {
      //微信分享
      this.$axios
        .get(`${Api.HTTP.getShareInfo}?url=${window.location.href}`)
        .then(res => {
          window.wx.config({
            debug: false,
            appId: res.data.appId, // 和获取Ticke的必须一样------必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"]
          });


          window.wx.ready(function() {
            window.wx.onMenuShareTimeline({
              title: "兴业银行-云柜台", 
              link:`https://${Api.URL}/clouldyg_user/index.html#/HomePage?code=${localStorage.getItem('employeeCode')}`,
              imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584113261342&di=a5c46f8bf6ce563a6f231c7dd652dba4&imgtype=0&src=http%3A%2F%2Fsup.user.img18.51sole.com%2Fimages3%2F20130310%2F1197196_20133101819726.jpg", 
              success: function(res) {},
              cancel: function(res) {}
            }); 


           window.wx.onMenuShareAppMessage({
              debug: false,
              title: "兴业银行-云柜台", // 分享标题
              desc:
                "智能柜台", 
                link: `https://${Api.URL}/clouldyg_user/index.html#/HomePage?code=${localStorage.getItem('employeeCode')}`,
              imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584113261342&di=a5c46f8bf6ce563a6f231c7dd652dba4&imgtype=0&src=http%3A%2F%2Fsup.user.img18.51sole.com%2Fimages3%2F20130310%2F1197196_20133101819726.jpg", 
              type: "", 
              dataUrl: "", 
              success: function(res) {},
              cancel: function(res) {
  
              }
            });
          });
        })
        .catch(function(error) {

          Toast("微信分享接口调用失败");
        });
    },
    noOpen(msg){
      Toast('暂未开放'+msg)
    },
        findUserExist() {
      this.$axios
        .get(
          `${Api.HTTP.findUserExist}?wechatOpenId=${localStorage.getItem(
            "openId"
          )}`
        )
        .then(res => {
          if(res.data.success == false){
              Toast("当前账号已在其他设备登录，请重新登录");
            setTimeout(()=>{
               localStorage.removeItem('employeeCode');
             this.$router.push({ path: "/login" });
            },1000)
          }
        })
        .catch(function(error) {
          Toast("网络错误");
        });
    }
  },
  mounted() {
    this.pubilcM.setTitle("首页");
    if (localStorage.getItem("openId") == null) {
       this.$router.push({ path: "/wechatLogin" });
    } else if (localStorage.getItem("employeeCode") == null || localStorage.getItem("employeeCode") == 'undefined'  ) {
      this.$router.push({ path: "/login" });
    } else {
      this.findUserExist();
      this.getAll();
      this.requestShare();
    }
    
  }
};
</script>
<style scoped>
.boxcontainer {
  margin-top: 0.2rem;
}
.hotAct {
  padding: 0.25rem;
  margin-top: 0.2rem;
  background: #fff;
}
.hotAct_title {
  border-left: 4px solid #dbb47f;
  box-sizing: border-box;
  padding-left: 0.2rem;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.28rem
}
.headfun{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center
}
.lookmore {
  color: #919191;
  font-size: 0.25rem;
    font-weight: initial;
}
.newList {
  width: 100%;
}
.itemList {
  padding-bottom: 0.1rem;
  border-bottom: 1px solid #eeeeee;
}
.listTitle {
  width: 100%;
  margin-top: 0.15rem;
  margin-bottom: 0.1rem;
}
.listContent {
  width: 100%;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
  color: #999999;
  line-height: 0.45rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 0.26rem;
}

.container {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  padding-bottom: 1.2rem;
  background: #f6f5f5;
  overflow: hidden;
  overflow-y: auto;
}
.header {
  padding: 0.25rem;
  box-sizing: border-box;
  height: 4rem;
  position: relative;
}
.set {
  width: 0.4rem;
}
.header_name {
  color: #fff;
    font-size: 0.3rem;
    font-weight: bold;
}
.mingpian {
  height: 2.5rem;
  background: #fff;
  margin-top: 0.6rem;
  border-radius: 0.05rem;
  position: relative;
  padding: 0.1rem;
  box-sizing: border-box;
}
.headerimg {
  position: absolute;
  left: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #fff;
  top: -0.5rem;
  border-radius: 0.05rem;
}
.mingpian_more {
  position: absolute;
  left: 0;
  top: 1.5rem;
  font-size: 0.23rem;
  padding: 0.13rem;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 0 0.2rem 0.2rem 0;
  color: #fff;
}
.mingpian_msg {
  padding: 0.2rem;
  font-size: 0.25rem;
  width: 58%;
  float: right;
}
.user_name {
  color: #3f3f3f;
  font-size: 0.4rem;
  font-weight: bold;
}
.user_job {
  color: #3f3f3f;
  font-size: 0.3rem;
  font-weight: bold;
}
.item_targer {
  position: relative;
  display: inline-block;
  padding: 1px;
  padding-left: 3px;
  padding-right: 6px;
  color: #8b714b;
  font-size: 0.2rem;
}
.item_targer::before {
  z-index: 0;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: skewX(-10deg);
  transform: skewX(-10deg);
  border: 1px solid #8b714b;
}
.mingpian_targer {
  margin-top: 0.2rem;
}
.soket {
  display: flex;
  float: right;
    margin-top: 0.2rem;
}
.soket_button {
  background: #4c556a;
  padding: 0.1rem;
  color: #fff;
  width: 1rem;
  font-size: 0.3rem;
  text-align: center;
  margin-left: 10px;
  border-radius: 0.15rem;
  height: 0.36rem;
  line-height: 0.36rem;
}
</style>